import { LocationFilled } from "@element-plus/icons-vue";
import { ElBreadcrumb, ElBreadcrumbItem, ElIcon } from "element-plus";
import { defineComponent, ref } from "vue";
import Style from './index.module.scss';
import {useRoute, useRouter} from "vue-router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
export default defineComponent({
    setup: function (props, {attrs}) {


        //获取当前路由的信息
        const route = useRoute();
        const router = useRouter();
        const title =router.currentRoute.value.meta.title || '';//当前路由的标题
        const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
        // 1. 直接使用Pinia中的titleArray（全局共享数据）
        let finalTitleList = [...breadcrumbStore.titleArray];
        // console.log("finalTitleList",finalTitleList)
        // const titleArray = ref<string[]>([]);
        // // 解析itemInfo数据
        // const itemInfoStr = route.query.itemInfo as string;
        // if (itemInfoStr) {
        //     try {
        //         const itemInfo = JSON.parse(itemInfoStr);
        //         if (itemInfo.title && !finalTitleList.includes(itemInfo.title)) {
        //             // finalTitleList.push(itemInfo.title);
        //             // 可选：将解析的title也存入Pinia，供后续页面使用
        //             // breadcrumbStore.addTitle(itemInfo.title);
        //         }
        //     } catch (error) {
        //         console.error("解析itemInfo失败:", error);
        //     }
        // }


        return () => <div class={Style.top} {...attrs}>
            <div class={Style.top_item}>
                <ElIcon class={Style.icon}>
                    <LocationFilled></LocationFilled>
                </ElIcon>
                <ElBreadcrumb separator="/">
                    {
                            finalTitleList.map((e, index) => {
                         return    <ElBreadcrumbItem>
                                <span style={{padding: "0 0.5px"}}>{e}</span></ElBreadcrumbItem>
                        })
                    }
                    {title && (
                        <ElBreadcrumbItem>
                            <span style={{ paddingLeft: "1px" }}>{title}</span>
                        </ElBreadcrumbItem>
                    )}

                </ElBreadcrumb>
            </div>

        </div>
    }
})
